<template>
  <div>
    <van-nav-bar
      title="商品详情"
      left-text="返回"
      right-text="首页"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />

    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item  v-for="item in imageList" :key="item.id" >
        <!--<img :src="item.url" class="img"/>-->
        <van-image
          width="100%"
          height="100%"
          fit="contain"
          :src="item.url"
        />
      </van-swipe-item>
    </van-swipe>

    <div class="qybg">
      <div  class="qytitle">
        产品介绍
      </div>
      <div v-html="productInfo.introduction"/>
    </div>

    <div class="qybg">
      <div  class="qytitle">
        提供支持
      </div>
      <div v-html="productInfo.support"/>
    </div>
    <div class="qybg">
      <div  class="qytitle">
        代理要求
      </div>
      <div v-html="productInfo.regulation"/>
    </div>
    <div class="qybg">
      <div style="margin-bottom: 10px"  class="qytitle">
        招商联系方式
      </div>
      <div>
        <van-cell-group>
          <van-cell title="招商联系人" :value="companyInfo.contacts" icon="manager-o" />
          <van-cell title="联系电话" :value="companyInfo.contactsPhone" icon="phone-o" @click="toPhone(companyInfo.contactsPhone)"/>
          <van-cell title="微信" :value="companyInfo.contactsWechat"  icon="chat-o"/>
        </van-cell-group>
      </div>
    </div>
    <div class="qybg">
      <div style="margin-bottom: 10px"  class="qytitle">
        公司信息
      </div>
      <div>
        <van-cell-group>
          <van-cell title="名称" center :value="companyInfo.name"  icon="wap-home-o" />
          <van-cell title="地址" center :value="companyInfo.provinceName+companyInfo.cityName+companyInfo.countyName+companyInfo.address"  icon="location-o" />
          <van-cell title="电话" :value="companyInfo.phone" icon="phone-o" @click="toPhone(companyInfo.phone)"/>
          <van-cell title="官网" :value="companyInfo.website" icon="desktop-o"/>
        </van-cell-group>
      </div>
    </div>

    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="公司首页" @click="onReturn" class="text-class" color="#1989FA"/>
      <van-goods-action-button type="warning" text="代理咨询" @click="onShowMessage"/>
      <van-goods-action-button type="danger" text="申请样品" @click="onShowSample"/>
    </van-goods-action>

    <van-popup v-model="showMessage" position="bottom" :style="{ height: '70%' }" >
      <div style="text-align: center;padding:10px;font-size: 18px">代理咨询</div>
      <van-form @submit="saveAgencyChat">
        <van-field
          v-model="form.name"
          required
          name="姓名"
          label="姓名"
          placeholder="您的姓名"
          :rules="[{ required: false, message: '请填写姓名' }]"
        />
        <van-field
          v-model="form.phone"
          required
          name="电话"
          label="电话"
          placeholder="您的电话"
          :rules="[{ required: true, message: '请填写电话' }]"
        />
        <van-field
          v-model="form.wechat"
          name="微信"
          label="微信"
          placeholder="您的微信号码"
          :rules="[{ required: false, message: '请填写微信' }]"
        />
        <van-field
          readonly
          clickable
          name="area"
          :value="form.dlqy"
          label="代理区域"
          placeholder="点击选择省市区"
          @click="showArea = true"
        />
        <van-popup v-model="showArea" position="bottom">
          <van-area
            :area-list="areaList"
            @cancel="showArea = false"
            @confirm="onConfirmArea"
          />
        </van-popup>
        <van-field name="agencyType" label="您是" >
          <template #input>
            <van-radio-group v-model="form.agencyType" direction="vertical">
              <div style="padding-top: 10px;">
                <van-radio name="1">代理商</van-radio>
              </div>
              <div style="padding-top: 10px;">
                <van-radio name="2">商超流通</van-radio>
              </div>
              <div style="padding-top: 10px;">
                <van-radio name="3">酒饭店</van-radio>
              </div>
            </van-radio-group>
          </template>
        </van-field>
        <van-field name="pushOtherCompany" label="推送同类厂家" >
          <template #input>
            <van-radio-group v-model="form.pushOtherCompany" direction="horizontal">
              <div style="padding-left: 20px;">
                <van-radio name="1">是</van-radio>
              </div>
              <div style="padding-left: 20px;">
                <van-radio name="0">否</van-radio>
              </div>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-model="form.message"
          rows="4"
          autosize
          label="留言"
          type="textarea"
          maxlength="100"
          placeholder="请输入留言"
          show-word-limit
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </van-popup>

    <van-popup v-model="showSample" position="bottom" :style="{ height: '50%' }" >
      <div style="text-align: center;padding:10px;font-size: 18px">样品申请</div>
      <van-form @submit="saveApplySample" >
        <van-field
          required
          v-model="formSample.name"
          name="收件人"
          label="收件人"
          placeholder="收件人"
          :rules="[{ required: true, message: '请填写收件人' }]"
        />
        <van-field
          required
          v-model="formSample.address"
          name="地址"
          label="地址"
          placeholder="您的地址"
          :rules="[{ required: true, message: '请填写地址' }]"
        />
        <van-field
          required
          v-model="formSample.phone"
          name="电话"
          label="电话"
          placeholder="您的电话"
          :rules="[{ required: true, message: '请填写电话' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </van-popup>
  </div>
</template>

<script>
import AreaList from '../../../static/area'
import { getCompanyInfo, getProductInfo, saveAgencyChat, addReadLog } from '../../api/api'
import { Dialog, Toast } from 'vant'
import { saveApplySample } from 'api/api'

export default {
  name: 'Product',
  data() {
    return {
      companyId: null,
      productId: null,
      productInfo: {},
      companyInfo: {},
      imageList: [],
      showMessage: false,
      showSample: false,
      areaList: AreaList,
      showArea: false,
      form: {},
      formSample: {},
      agencyId: null
    }
  },
  created() {
    const agencyId = this.$route.query.agencyId
    this.companyId = this.$route.query.companyId
    this.productId = this.$route.query.productId
    console.log('agencyid:' + agencyId)
    if (agencyId) {
      console.log('agencyid:' + agencyId)
      const param = { agencyid: agencyId, companyId: this.companyId, productId: this.productId }
      console.log(param)
      addReadLog(param).then(response => {

      })
    }
    this.agencyId = agencyId

    this.getProductInfo()
    this.getCompanyInfo()
  },
  methods: {
    getProductInfo() {
      const param = { productId: this.productId }
      getProductInfo(param).then(response => {
        this.productInfo = response.data
        const resultImage = []
        if (typeof this.productInfo.image1 !== 'undefined' && this.productInfo.image1 !== '' && this.productInfo.image1 !== null) {
          resultImage.push({ id: 1, url: this.productInfo.image1 })
        }
        if (typeof this.productInfo.image2 !== 'undefined' && this.productInfo.image2 !== '' && this.productInfo.image2 !== null) {
          resultImage.push({ id: 2, url: this.productInfo.image2 })
        }
        if (typeof this.productInfo.image3 !== 'undefined' && this.productInfo.image3 !== '' && this.productInfo.image3 !== null) {
          resultImage.push({ id: 3, url: this.productInfo.image3 })
        }
        if (typeof this.productInfo.image4 !== 'undefined' && this.productInfo.image4 !== '' && this.productInfo.image4 !== null) {
          resultImage.push({ id: 4, url: this.productInfo.image4 })
        }
        if (typeof this.productInfo.image5 !== 'undefined' && this.productInfo.image5 !== '' && this.productInfo.image5 !== null) {
          resultImage.push({ id: 5, url: this.productInfo.image5 })
        }
        if (typeof this.productInfo.image6 !== 'undefined' && this.productInfo.image6 !== '' && this.productInfo.image6 !== null) {
          resultImage.push({ id: 6, url: this.productInfo.image6 })
        }
        this.imageList = resultImage
      })
    },
    getCompanyInfo() {
      const param = { companyId: this.companyId }
      getCompanyInfo(param).then(response => {
        this.companyInfo = response.data
      })
    },
    onClickLeft() {
      this.$router.go(-1) // 返回上一层
    },

    onClickRight() {
      this.$router.push({ path: '/home', query: { agencyId: this.agencyId }})
    },

    onShowMessage() {
      this.showMessage = true
    },
    onShowSample() {
      this.showSample = true
    },
    onReturn() {
      this.$router.push({ path: '/company', query: { companyId: this.companyId }})
      // this.$router.go(-1) // 返回上一层
    },
    onConfirmArea(values) {
      debugger
      console.log(values)
      this.form.province = values[0].name
      this.form.city = values[1].name
      this.form.county = values[2].name

      const dlqy = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join('/')
      this.form.dlqy = dlqy
      this.showArea = false
    },
    saveAgencyChat() {
      const agencyId = this.$store.getters.agencyId
      const productId = this.productId
      const param = { ...this.form, companyId: this.companyId, agencyId: agencyId, productId: productId }
      debugger
      saveAgencyChat(param).then(response => {
        console.log(response)
        if (response.code === 200) {
          this.showMessage = false
          Dialog.alert({
            title: '',
            message: '提交成功'
          }).then(() => {
            // on close
          })
        } else {
          Toast.fail(response.msg)
        }
      })
    },
    saveApplySample() {
      let agencyId = this.$store.getters.agencyId
      const that = this
      if (!agencyId) {
        agencyId = that.agencyId
      }
      const productId = this.productId
      const param = { ...this.formSample, companyId: this.companyId, agencyId: agencyId, productId: productId }
      saveApplySample(param).then(response => {
        console.log(response)
        if (response.code === 200) {
          this.showSample = false
          Dialog.alert({
            title: '',
            message: '提交成功'
          }).then(() => {
            // on close
          })
        } else {
          Toast.fail(response.msg)
        }
      })
    },
    toPhone(phone) {
      window.location.href = 'tel://' + phone
    }
  }
}
</script>

<style scoped>
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    height: 280px;
    text-align: center;
    background-color: #ffffff;
  }
  .img{
    height: 100%;
    width: 100%;
  }
  .qybg{
    width: 100%;
    background-color: #ffffff;
    padding:10px;
    margin-top: 5px;
    box-sizing:border-box;
  }
  .qytitle{
    font-size: 16px;
  }

  .text-class{
    color: #1989FA !important;
  }
</style>
